<template>
  <div class="box">
    <h2>发送页面</h2>
    <el-input v-model="data.title"
              placeholder="请输入标题"
              size="normal"
              clearable
              @change=""
              class="title"></el-input>
    <el-input v-model="data.content"
              placeholder="请输入内容"
              :rows="2"
              type="textarea"
              class="title"></el-input>
    <div class="time">
      <text>请选择发送时间(默认立即发送) </text>
      <el-date-picker v-model="data.value"
                      type="datetime"
                      placeholder="请选择发送时间"
                      format="YYYY/MM/DD hh:mm:ss"
                      value-format="x" />
    </div>
    <el-button type="primary"
               size="default"
               @click="sendmsg">提交</el-button>
    <el-button type="info"
               size="default"
               @click="gotoLogin"
               class="login">登录</el-button>
    <router-link to="./task"
                 class="a">点我去创建任务</router-link>

  </div>

</template>

<script lang="ts" setup>
import router from "@/router";
import { ElMessage } from "element-plus";
import { reactive } from "vue";
import { sendMsg } from "../api/api";
const sendmsg = () => {
  sendMsg(data)
    .then((res) => {
      // console.log(res);
      ElMessage.success("定时发送成功");
    })
    .catch((err) => {
      ElMessage.error("发送失败");
      console.log(err);
    });
};

// 跳转登陆页面
const gotoLogin = () => {
  router.push("./login");
};
const data = reactive({
  // 标题
  title: "",
  // 内容
  content: "",
  // 定时日期
  value: new Date().getTime(),
});
</script>

<style lang="less" scope>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  width: 50%;
  height: 200px;
  margin: 100px auto 0;
  position: relative;
  .title {
    margin: 10px 0;
  }
  .time {
    margin: 20px 0;
    transform: translateX(-25%);
  }
  h2 {
    margin: 20px 0;
  }
  .a {
    text-decoration: none;
    color: rgb(64, 158, 255);
    margin-left: 50px;
  }
}
</style>
